<template>
    <view
        class="w-full announcement-card common-shadow rounded-14 overflow-hidden box-border mt-16 flex-col-box"
        v-for="item in noticeList"
        :key="item.noticeId"
        @click="handleDetail(item)"
    >
        <image mode="aspectFill" class="w-full announcement-post" :src="item.noticeAppearance"/>
        <view class="w-full flex-1 flex-justifyBetween-itemsCenter-box px-10 box-border">
            <view class="flex-1 flex-itemsCenter-box">
                <view
                    class="tips-box rounded-6 px-10 py-4 bg-primary text-white mr-10 fz-10"
                    :class="[item.noticeType === '1' ? 'notice' : 'announcement']"
                >
                    {{ item.noticeType === '1' ? '通知' : '公告' }}
                </view>
                <span class="fz-14">{{ item.noticeTitle.length > 12 ? `${ item.noticeTitle.substring(0, 12)}...` : item.noticeTitle }}</span>
            </view>
            <span class="fz-12">{{ item.createTime }}</span>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue'
import { NoticeDetail } from '@/api/modules/announcement'

// 父组件参数
const props = defineProps({
	list: {
		type: Array as PropType<NoticeDetail[]>,
		default: () => []
	}
})

// 公告列表
const noticeList = computed(() => {
	return props.list.map(item => {
		item.createTime = item.createTime.split(' ')[0]
		return item
	})
})

// 跳转公告详情
const handleDetail = (item: NoticeDetail) => {
	uni.setStorageSync('noticeDetail', item)
	uni.navigateTo({
		url: '/pages/announcementDetail/index'
	})
}
</script>

<style lang="scss" scoped>
.tips-box {
}

.announcement-card {
    height: 200px;
}

.announcement-post {
    height: 160px;
}

.announcement {
    background-color: $uni-color-primary;
}

.notice {
    background-color: #FFBA00;
}

.icon-new {
    font-size: 60rpx;
}
</style>
